import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Modal,Icon,Tabs,message,Table,Dropdown,Menu,Button,Input,Form ,Row,Col,DatePicker,Select,Popconfirm} from 'antd';
const Search = Input.Search;
const Option = Select.Option;
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';

import api from '../api';
import moment from 'moment';
import {bind_change, bind_toggle} from '../common/State';

//导入常量
import {WITHDRAW_TYPE} from '../constants/index';

const { RangePicker } = DatePicker;

export default class Withdraw extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state={
           page:1,
           total:1,
           list:[],
           search:{},
           loading:true,
        };
    }

    componentWillMount(){
        this.doFetch();
    }
    componentWillReceiveProps(nextProps){
        
    }
    async doFetch(page=1){
      let {search} = this.state;

      let result = await api('/user/withdraw/list',{...search,page});
      if(result.cd!=0){
        message.error(result.msg);
        this.setState({
          loading:false
      })
        return;
      }
      this.setState({
          page,
          total:result.total,
          list:result.data,
          loading:false
      })
    }

    doSearch(){
      this.setState({
        loading:true
      })
      this.doFetch();
    }

    //放款
    async doLending (record) {
        let result = await api('/user/withdraw/lending',{id:record.id});
        if(result.cd!=0){
            message.error(result.msg);
            return
        }
        message.success('操作成功',1,()=>{
            let {page} = this.state;
            this.setState({
                loading:true
            })
            this.doFetch(page);
        })
    }
    

    //分页
    toPage({current:page,pageSize,total}){
      this.doFetch(page);
    }

   
    render() {
        var {list, page,total,loading,search}=this.state;
        return (
            <div >
                <NavBar navs={[{title:'用户管理'}]} />
                <ContentBody className='container'>
                  <div className='search-panel'>
                      <Row gutter={16}>
                        <Col span={12}>
                          <label>真实姓名:</label>
                          <Input 
                            {...this::bind_change('search.realName')} 
                            placeholder="请输入真实姓名" 
                          />
                        </Col>
                        <Col span={12}>
                          <div>提交时间:</div>
                          <RangePicker
                            style={{width:'100%'}}
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                            placeholder={['请选择开始时间', '请选择结束时间']}
                            allowClear={true}
                            onOk={(submitTime) => {
                              let {search} = this.state;
                              search.startTime = submitTime[0].format('YYYY-MM-DD HH:mm:ss');
                              search.endTime = submitTime[1].format('YYYY-MM-DD HH:mm:ss');
                              this.setState({search})
                            }}
                          />
                        </Col>
                      </Row>
                      <div className='height20'></div>
                      <Row gutter={16} >
                        <Col span={12}>
                          <label>预留手机号:</label>
                          <Input 
                            placeholder="请输入预留手机号" 
                            {...this::bind_change('search.phone')} 
                          />
                        </Col>
                        <Col span={12}>
                          <label>状态:</label>
                          <Select 
                            value={search.status||""}
                            style={{ width: '100%' }} 
                            onChange={(value) => {
                              let search = this.state;
                              search.status = value
                              this.setState({
                                search
                              })
                            }}
                          >
                            <Option value="">请选择</Option>
                            <Option value='0'>待处理</Option>
                            <Option value='1'>已处理</Option>
                          </Select>
                        </Col>
                      </Row>
                      <div className='marginT20 text-center'>
                         <Button type="primary" onClick={this.doSearch.bind(this)} icon="search">查询</Button>
                         <Button 
                            type="primary" 
                            className='marginL20' 
                            onClick={()=>{
                              this.setState({
                                search:{}
                              })
                            }} 
                          >
                          重置
                          </Button>
                      </div>
                  </div>


                  <Table 
                    bordered
                    columns={this.getColumns()} 
                    simple 
                    dataSource={list}
                    pagination={{
                      current:page,
                      total:total,
                      pageSize:10,
                      showQuickJumper : true
                    }}
                    loading={loading}
                    onChange={this.toPage.bind(this)}
                    scroll={{ x: 1000 }}
                    rowKey={record => record.id}
                  />
                </ContentBody>
                  
            </div>
        );
    }

    getColumns(){

      let columns = [
            {
              title: '用户编号',
              dataIndex: 'id',
              key: 'id',
            }, {
              title: '真实姓名',
              dataIndex: 'real_name',
              key: 'real_name',
              
            },{
              title: '用户昵称',
              dataIndex: 'nick_name',
              key: 'nick_name',
            },{
              title: '注册手机号',
              dataIndex: 'user_phone',
              key: 'user_phone'
            }, {
              title: '预留手机号',
              dataIndex: 'cash_acc_tel',
              key: 'cash_acc_tel'
            },{
              title: '银行卡号',
              dataIndex: 'cash_bank_acc_no',
              key: 'cash_bank_acc_no',
            },{
              title: '身份证号',
              dataIndex: 'cash_acc_idcard',
              key: 'cash_acc_idcard'
            },{
              title: '提现金额',
              dataIndex: 'cash_amount',
              key: 'cash_amount'
            },{
              title: '提交时间',
              dataIndex: 'created_at',
              key: 'created_at'
            },{
              title: '状态',
              dataIndex: 'status',
              key: 'status',
              render:(status) => {
                return WITHDRAW_TYPE[status];
              }
            },{
              title: '操作',
              key: 'action',
              fixed: 'right',
              width:110,
              render: (record) =>{
                  return (
                        <span className={'table-operation'}>
                            <span>
                              <a 
                                href='javascript:void 0'
                                onClick={()=>{
                                  this.context.router.push(`/user/withdraw/detail?id=${record.id}`)
                                }}
                              >
                              查看
                              </a>
                              
                            </span>
                            {record.status==0?
                              <span>
                                <span className="ant-divider" />
                                  <Popconfirm title="是否进行放款操作？" onConfirm={this.doLending.bind(this,record)} >
                                      <a  href='javascript:void 0'>提现确认</a>
                                  </Popconfirm>
                              </span>
                              :null
                            }
                            
                        </span>
                      )
              } ,
            }
        ];

        return columns
    }
}

Withdraw.contextTypes= { router: React.PropTypes.object.isRequired};

